<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        .el-header {
            /*background-color: #B3C0D1;*/
            background-color: #99CCCC;
            color: #333;
        }

        .el-aside {
            /*#D3DCE6;*/
            background-color: #545c64;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 100%;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .asideModel {
            height: 160px;
        }

        a {
            text-decoration: none;
        }

        .logoImg {
            float: left;
            width: 180px;
            height: 90px;
            margin: 30px 30px 10px 30px;
            opacity: 0.85;
        }

        .mainBtn123 {
            /*float: left;*/
            width: 180px;
            height: 40px;
            margin: 0px 30px 30px 30px;
        }

        .link {
            margin: 10px 0px 0px 0px;
            height: 50px;
        }

        .changespan {
            text-align: right;
            margin-right: -20px;
        }

        .outspan {
            text-align: right;
            padding-right: 20px;
        }

        .headImg {
            float: right;
            border: 2px solid lightslategray;
            margin-top: 10px;
            margin-right: 10px;
        }

        .username {
            float: right;
            line-height: 70px;
        }

        .el-tabs--border-card {
            height: 100%;
        }

        .el-submenu .el-menu-item {
            color: #99CCCC !important;
        }

        .el-menu-item.is-active {
            color: #ffd04b !important;
        }

        .el-card__header {
            padding: 5px 10px;
            background-color: #fafafa;
            border-radius: 3px;
            border-left: 5px solid #67C23A;
            text-align: left;
        }

        .echarts1 {
            left: -140px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card__body {
            padding: 0px;
        }

        .box-card {
            width: 100%;
        }

        .xiaolaba {
            float: left;
            height: 20px;
            width: 20px;
            margin: 29px 10px 0px 0px;
        }

        .tonghzi {
            float: left;
            margin-top: 29px;
            color: gray;
            font-size: small;
        }
        .el-carousel__indicator--vertical{
            display: none;
        }
    </style>
</head>
<body>
<div id="mydiv">
    <el-container>
        <el-aside width="240px">
            <!--系统名称和logo-->
            <div class="titleHead"><img class="logoImg" src="/secondStage/img/logo333.png"/>
                <a href="/secondStage/main.html">
                    <el-button type="primary" icon="el-icon-s-home" class="mainBtn123">首 页</el-button>
                </a>
            </div>
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu default-active="101" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu :index="menus.pid" v-for="menus in usermenus">
                            <template slot="title">
                                <i :class="menus.glyphicon"></i>
                                <span>{{menus.pname}}</span>
                            </template>
                            <el-menu-item-group v-for="menu in menus.menuList">
                                <a :href="menu.url">
                                    <el-menu-item :index="menu.pid">
                                        <i :class="menu.glyphicon"></i>
                                        {{menu.pname}}
                                    </el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>

        </el-aside>
        <el-container>
            <el-header style="height: 60px">
                <el-row>
                    <!--语音轮播-->
                    <el-col :span="10">
                        <el-carousel :interval="2000" height="50px" direction="vertical">
                            <el-carousel-item v-for="item in msgList" :key="item">
                                <img src="img/laba.png" class="xiaolaba">
                                <div class="tonghzi">{{item}}</div>
                                <!--<img src="img/laba.png" class="xiaolaba"><div class="tonghzi">12348</div>-->
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                    <!--头像-->
                    <el-col :span="5" :offset="5">
                        <span class="username">欢迎您：<strong>{{username}}</strong></span>
                        <el-avatar :size="45" :src="circleUrl" class="headImg"></el-avatar>
                    </el-col>
                    <el-col :span="2" class="changespan">
                        <el-link href="/secondStage/html/alterPassword.html" icon="el-icon-edit" class="link">修改密码
                        </el-link>
                    </el-col>
                    <el-col :span="2" class="outspan">
                        <el-link @click="islogout" icon="el-icon-switch-button" class="link">退出登录</el-link>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>
                <!--导航栏-->
                <el-tabs type="border-card">
                    <el-tab-pane label="首页">

                        <!--卡片布局-->
                        <!--echarts数据展示-->
                        <el-card class="box-card" shadow="hover" style="border: none">
                            <div slot="header" class="clearfix">
                                <span style="font-size: 16px;color: lightslategray; font-family: Arial"><strong>渠道访问情况</strong></span>
                            </div>
                            <!-- 渠道访问情况的echarts -->
                            <div id="main" style="width: 1850px;height:300px;" class="echarts1"></div>
                        </el-card>
                        <!--用户画像的echarts-->
                        <el-card class="box-card" shadow="hover" style="border: none">
                            <div slot="header" class="clearfix">
                                <span style="font-size: 16px;color: lightslategray"><strong>用户画像</strong></span>
                            </div>
                            <div id="main2" style="width: 600px;height:420px;float: left"></div>
                            <div id="main3" style="width: 480px;height:420px;float: left"></div>
                            <div id="main4" style="width: 480px;height:420px;float: left"></div>
                        </el-card>


                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#mydiv",
        data: {
            usermenus: "",
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            username: "",
            msgList: ['[会议通知] 今天晚上19：30大会议室开技术交流会，开发组全体成员参加。',
                '[开发二组 包子] 弟兄们想一下晚上吃啥',
                '[会议通知] 今天晚上19：30大会议室开技术交流会，开发组全体成员参加。',
                '[公关部 乐言] 包哥，能帮我定个外卖吗',
                '[开发一组 otto] ......',
                '[开发二组 炫炫] ......',
                '[总经理] 私人语音不允许发公屏，扣工资！',
                '[会议通知] 今天晚上19：30大会议室开技术交流会，开发组全体成员参加。',
                '[公关部 乐言] 包哥，我能去你家过年吗',
                '[总经理] 公关部乐言，扣除本月工资！',
                '[公关部 乐言] ......',
                '[会议通知] 今天晚上19：30大会议室开技术交流会，开发组全体成员参加。',
                '[开发二组 包子] 乐宝别说了，妈妈怕']
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            islogout() {
                this.$confirm('此操作将退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = "/secondStage/login?method=logout";
                });
            }
        },
        created() {
            axios.post('/secondStage/showMenu', 'method=getMenu')
                .then(response => {
                    console.log(response);
                    if (response.data.returnCode == 200) {
                        this.usermenus = response.data.returnData;
                        this.circleUrl = "/secondStage/" + response.data.returnAccount.aimg;
                        this.username = response.data.returnAccount.aname;
                    }
                }).catch(function (error) {
                console.log(error);
            });
        }
    })


    // echarts
    // 折线图
    var myChart = echarts.init(document.getElementById('main'));

    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    var option = {
        backgroundColor: '#fff',
        // title: {
        //     text: '应用访问情况',
        //     textStyle: {
        //         fontSize: 20,
        //         fontWeight: 400
        //     },
        //     left: 'center',
        //     top: '5%'
        // },
        // 图例组件
        legend: {
            icon: 'circle',
            top: '10%',
            right: '60%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: '#556677'
            }
        },
        // 柱状图和折线图的展示
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
            },
            top: '1%',
            right: '10%'

        },
        // 提示框组件
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                label: {
                    show: true,
                    backgroundColor: '#fff',
                    color: '#556677',
                    borderColor: 'rgba(0,0,0,0)',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowOffsetY: 0
                },
                lineStyle: {
                    width: 0
                }
            },
            backgroundColor: '#fff',
            textStyle: {
                color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
            top: '15%'
        },
        xAxis: [{
            name: '月份',
            type: 'category',
            data: ['2020.1', '2020.2', '2020.3', '2020.4', '2020.5', '2020.6', '2020.7'],
            axisLine: {
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#556677'
                },
                margin: 15
            },
            axisPointer: {
                label: {
                    padding: [11, 5, 7],
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 0.9,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 0.9,
                            color: '#33c0cd' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#33c0cd' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            boundaryGap: false
        }],
        yAxis: {
            name: '访问趋势',
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisLabel: {
                show: false,
                textStyle: {

                    color: '#556677'
                }
            },
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'App Store',
            type: 'line',
            data: [100, 100, 120, 120, 150, 130, 170],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#9effff'
                },
                    {
                        offset: 1,
                        color: '#9E87FF'
                    }
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            },
            itemStyle: {
                normal: {
                    color: colorList[0],
                    borderColor: colorList[0]
                }
            }
        }, {
            name: '小米用用商店',
            type: 'line',
            data: [110, 100, 110, 140, 160, 160, 180],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                    offset: 0,
                    color: '#73DD39'
                },
                    {
                        offset: 1,
                        color: '#73DDFF'
                    }
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            },
            itemStyle: {
                normal: {
                    color: colorList[1],
                    borderColor: colorList[1]
                }
            }
        },
            {
                name: '豌豆荚',
                type: 'line',
                data: [140, 135, 150, 144, 180, 160, 161],
                symbolSize: 1,
                yAxisIndex: 0,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#fe9a'
                    },
                        {
                            offset: 1,
                            color: '#fe9a8b'
                        }
                    ]),
                    shadowColor: 'rgba(254,154,139, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    normal: {
                        color: colorList[2],
                        borderColor: colorList[2]
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

    // 南丁格尔玫瑰图
    var myChart2 = echarts.init(document.getElementById('main2'));
    var option2 = {
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     x: 'center'
        // },
        color: ['#37a2da', '#32c5e9', '#e7bcf3', '#8378ea', '#ff9f7f', '#fb7293'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical', // 标签名称垂直排列
        //     top: '40%', // 标签的位置
        //     right: '10%',
        //     data: ['北京', '上海', '广州', '深圳', '二线城市', '三线城市']
        // },

        calculable: true,
        series: [{
            name: '用户城市数据表',
            type: 'pie',
            radius: [50, 150],
            label: {
                formatter: [
                    '{a|{d}}%',
                    '{b|{b}}'
                ].join('\n'),

                rich: {
                    a: {
                        fontSize: 20,
                        fontWeight: 'bold',
                        fontStyle: 'normal',
                        fontFamily: 'HelveticaNeueLT'
                    },
                    b: {
                        height: 20,
                        fontFamily: 'Tahoma'
                    },

                }
            },
            roseType: 'area',
            data: [{
                value: 100,
                name: '北京'
            },
                {
                    value: 200,
                    name: '上海'
                },
                {
                    value: 150,
                    name: '广州'
                },
                {
                    value: 250,
                    name: '深圳'
                },
                {
                    value: 500,
                    name: '二线城市'
                },
                {
                    value: 400,
                    name: '三线城市'
                },
            ]
        }]
    };
    myChart2.setOption(option2);

    // 仪表盘1
    var myChart3 = echarts.init(document.getElementById('main3'));
    var dataArr = 42;
    var colorSet = {
        color: '#37a2da'
    };
    var option3 = {
        // backgroundColor: '#0E1327',
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },

        series: [{
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            // radius: '42%',
            radius: '60%',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr / 100, colorSet.color],
                        [1, "#111F42"]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function (value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0) + "%";
                    } else {
                        return 0;
                    }
                },
                offsetCenter: [0, 82],
                textStyle: {
                    padding: [80, 0, 0, 0],
                    fontSize: 40,
                    fontWeight: '700',
                    color: colorSet.color
                }
            },
            title: { //标题
                show: true,
                offsetCenter: [0, 46], // x, y，单位px
                textStyle: {
                    color: "blank",
                    fontSize: 15, //表盘上的标题文字大小
                    fontWeight: 400,
                    fontFamily: 'PingFangSC'
                }
            },
            data: [{
                name: "新访/回访",
                value: dataArr,
            }],
            pointer: {
                show: true,
                length: '75%',
                radius: '20%',
                width: 10, //指针粗细
            },
            animationDuration: 4000,
        },
            {
                name: '外部刻度',
                type: 'gauge',
                //  center: ['20%', '50%'],
                radius: '70%',
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [
                            [1, 'rgba(0,0,0,0)']
                        ]
                    }
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: '#37a2da',
                    distance: 25,
                    formatter: function (v) {
                        switch (v + '') {
                            case '0':
                                return '0';
                            case '10':
                                return '10';
                            case '20':
                                return '20';
                            case '30':
                                return '30';
                            case '40':
                                return '40';
                            case '50':
                                return '50';
                            case '60':
                                return '60';
                            case '70':
                                return '70';
                            case '80':
                                return '80';
                            case '90':
                                return '90';
                            case '100':
                                return '100';
                        }
                    }
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                        width: 1,
                    },
                    length: -8
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -20,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                    }
                }, //分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
        ]
    };
    myChart3.setOption(option3);
    // 仪表盘2
    var myChart4 = echarts.init(document.getElementById('main4'));
    var dataArr = 68;
    var colorSet = {
        color: '#ff9f7f'
    };
    var option4 = {
        // backgroundColor: '#0E1327',
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
        },

        series: [{
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            // radius: '42%',
            radius: '60%',
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr / 100, colorSet.color],
                        [1, "#fb7293"]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function (value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0) + "%";
                    } else {
                        return 0;
                    }
                },
                offsetCenter: [0, 82],
                textStyle: {
                    padding: [80, 0, 0, 0],
                    fontSize: 40,
                    fontWeight: '700',
                    color: colorSet.color
                }
            },
            title: { //标题
                show: true,
                offsetCenter: [0, 46], // x, y，单位px
                textStyle: {
                    color: "blank",
                    fontSize: 15, //表盘上的标题文字大小
                    fontWeight: 400,
                    fontFamily: 'PingFangSC'
                }
            },
            data: [{
                name: "新注册",
                value: dataArr,
            }],
            pointer: {
                show: true,
                length: '75%',
                radius: '20%',
                width: 10, //指针粗细
            },
            animationDuration: 4000,
        },
            {
                name: '外部刻度',
                type: 'gauge',
                //  center: ['20%', '50%'],
                radius: '70%',
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [
                            [1, 'rgba(0,0,0,0)']
                        ]
                    }
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: '#fb7293',
                    distance: 25,
                    formatter: function (v) {
                        switch (v + '') {
                            case '0':
                                return '0';
                            case '10':
                                return '10';
                            case '20':
                                return '20';
                            case '30':
                                return '30';
                            case '40':
                                return '40';
                            case '50':
                                return '50';
                            case '60':
                                return '60';
                            case '70':
                                return '70';
                            case '80':
                                return '80';
                            case '90':
                                return '90';
                            case '100':
                                return '100';
                        }
                    }
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                        width: 1,
                    },
                    length: -8
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -20,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                    }
                }, //分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
        ]
    };
    myChart4.setOption(option4);


</script>
</html>
